<template lang="pug">
  section
    a(@click='handleCollapsedChange').collapse-btn
      Icon(:type='collapsed?"ios-arrow-back":"ios-arrow-forward"',size='24')
    Menu(
      v-show="collapsed"
      ref='sideMenu',
      :theme="theme",
      :active-name="activeName",
      :open-names='openNames',
      accordion,:width='collapsed?"180px":"64px"',@on-select="handleChangeMenu")
      template(v-for="(item, index) in menuLists")
        MenuItem(v-if="item.children.length<=1",:name="item.children[0].name",:key="'menuitem'+item.name")
          Icon(:type="item.children[0].icon||item.icon", :key="'menuicon'+item.name")
          span(:key="'title'+item.name") {{item.title}}
        Submenu(v-if="item.children.length > 1",:name="item.name")
          template(slot="title")
            Icon(:type="item.icon")
            span {{item.title}}
          template(v-for="(child, index) in item.children")
            MenuItem(:name="child.name",:key="'menuitem'+child.name")
              Icon(:type="child.icon",:key="'icon'+child.name")
              span(:key="'title'+child.name") {{child.title}}
    div(v-show="!collapsed").menu-collapsed
      template(v-for="(item, index) in menuLists")
        Tooltip(v-if="item.children.length<=1",transfer,:content='item.title',placement="right",:key="`drop-menu-${item.name}`")
          a(@click='handleChangeMenu(item.children[0].name)').drop-menu-a
            Icon(:type='item.children[0].icon||item.icon')
        Dropdown(v-if="item.children.length > 1",transfer,:placement="placement",@on-click='handleChangeMenu')
          a(@mouseover="handleMousemove($event, item.children)").drop-menu-a
            Icon(:type='item.icon')
          DropdownMenu(slot='list')
            template(v-for="child in item.children")
              DropdownItem(:key="`drop-${child.name}`",:name='child.name')
                Icon(:type='child.icon',:size='14').menu-icon
                span.menu-title {{child.title}}
</template>

<script>
export default {
  name: 'SidebarMenu',
  props: {
    menuLists: Array
  },
  data() {
    return {
      theme: 'light',
      collapsed: true,
      placement: 'right-end',
      activeName: this.$route.name,
      breadcrumbStairData: [
        { matchedName: 'gather_index', breadcrumbName: '采集中心' },
        { matchedName: 'deploy_index', breadcrumbName: '配置中心' },
        { matchedName: 'log_index', breadcrumbName: '日志中心' },
        { matchedName: 'monitor_index', breadcrumbName: '监控中心' }
      ],
      breadcrumbMultilevelData: [
        { matchedName: 'user_manage', breadcrumbName: '用户中心', breadcrumbChildName: '用户管理' },
        { matchedName: 'role_manage', breadcrumbName: '用户中心', breadcrumbChildName: '权限管理' },
        { matchedName: 'document_author', breadcrumbName: '用户中心', breadcrumbChildName: '文档与授权' },
        { matchedName: 'site_index', breadcrumbName: '模板中心', breadcrumbChildName: '站点管理' },
        { matchedName: 'mould_index', breadcrumbName: '模板中心', breadcrumbChildName: '数据采集模板' },
        { matchedName: 'mould_export', breadcrumbName: '模板中心', breadcrumbChildName: '数据模板导出' },
        { matchedName: 'database_index', breadcrumbName: '数据中心', breadcrumbChildName: '数据管理' },
        { matchedName: 'database_count', breadcrumbName: '数据中心', breadcrumbChildName: '数据统计' }
      ]
    }
  },
  computed: {
    openNames() {
      if (this.$route.name === 'mould_setting') {
        return ['mould']
      }
      if (this.$route.name === 'task_index') {
        return ['gather']
      }
      if (this.$route.name === 'user_setting') {
        return ['supervise']
      }
      if (this.$route.name === 'role_setting') {
        return ['supervise']
      }
      if (this.$route.name === 'site_setting') {
        return ['mould']
      }
      if (this.$route.name === 'gather_index') {
        return ['gather']
      }
      return [this.$route.matched[0].name]
    }
  },
  watch: {
    $route(newRoute) {
      this.handleActiveBreadCrumb(newRoute)
    }
  },
  mounted() {
    this.setActiveRouteNames(this.$route)
  },
  methods: {
    handleActiveBreadCrumb(newRoute) {
      const breadcrumbData = () => {
        if (newRoute.matched[0].name !== 'otherRouter') {
          if (['gather', 'deploy', 'log', 'monitor'].includes(newRoute.matched[0].name)) {
            for (let i = 0, len = this.breadcrumbStairData.length; i < len; i++) {
              if (newRoute.matched[1].name === this.breadcrumbStairData[i].matchedName) {
                return [{ name: this.breadcrumbStairData[i].breadcrumbName }]
              }
            }
          } else {
            for (let i = 0, len = this.breadcrumbMultilevelData.length; i < len; i++) {
              if (newRoute.matched[1].name === this.breadcrumbMultilevelData[i].matchedName) {
                return [{ name: this.breadcrumbMultilevelData[i].breadcrumbName }, { name: this.breadcrumbMultilevelData[i].breadcrumbChildName }]
              }
            }
          }
        }
      }
      this.$store.dispatch('breadcrumb/getBreadCrumb', breadcrumbData())
    },
    setActiveRouteNames(newRoute) {
      if (newRoute.name === 'mould_setting') {
        return (this.activeName = 'mould_index')
      }
      if (newRoute.name === 'deploy_setting') {
        return (this.activeName = 'deploy_index')
      }
      if (newRoute.name === 'task_index') {
        return (this.activeName = 'gather_index')
      }
      if (newRoute.name === 'user_setting') {
        return (this.activeName = 'user_manage')
      }
      if (newRoute.name === 'role_setting') {
        return (this.activeName = 'role_manage')
      }
      if (newRoute.name === 'site_setting') {
        return (this.activeName = 'site_index')
      }
      this.handleActiveBreadCrumb(newRoute)
      return (this.activeName = this.$route.name)
    },
    handleChangeMenu(name) {
      this.$router.push({ name })
    },
    handleCollapsedChange() {
      this.collapsed = !this.collapsed
    },
    handleCollapsedMenu(name) {
      sessionStorage.setItem('activeName', name)
      this.$router.push({ name })
    },
    handleMousemove(event, children) {
      const { pageY } = event
      const height = children.length * 38
      const isOverflow = pageY + height < window.innerHeight
      this.placement = isOverflow ? 'right-start' : 'right-end'
    }
  },
  updated() {
    this.$nextTick(() => {
      if (this.$refs.sideMenu) {
        this.$refs.sideMenu.updateOpened()
      }
    })
  }
}
</script>

<style lang="scss">
.ivu-menu-item > i,
.ivu-menu-submenu-title > i {
  width: 13px;
}
.collapse-btn {
  color: inherit;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  border-right: 1px solid #dcdee2;
}
.menu-collapsed {
  width: 64px;
  .ivu-tooltip,
  .ivu-dropdown {
    width: 100%;
  }
  .drop-menu-a {
    display: inline-block;
    padding: 6px 15px;
    font-size: 18px;
    width: 100%;
    text-align: center;
    color: #495060;
  }
}
.menu-icon {
  vertical-align: bottom;
}
.menu-title {
  padding-left: 6px;
}
</style>



